<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>持明法洲轮播图</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
	<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
	<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body class="layui-layout-body">

	<%--表格 start--%>
	<div class="layui-row">
		<table id="bannerList" lay-filter="bannerList"></table>
	</div>
    <!--自定义显示图片 d代表data当前对象-->
    <script type="text/html" id="showimg">
        <img src="${pageContext.request.contextPath}/{{d.bannerImageUrl}}" width="39px" height="39px"/>
    </script>
    <!--自定义显示图片 d代表data当前对象-->
	<!--表格最右边编辑表格-->
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
	</script>
	<%--表格 end--%>
	<%--添加  start--%>
	<form class="layui-form" action="" lay-filter="addFromFilter" id="addForm" style="display: none;padding: 20px 50px 0 0 " method="post" enctype="multipart/form-data">
		<div class="layui-form-item">
			<label class="layui-form-label">图片名</label>
			<div class="layui-input-block">
				<input type="text" name="bannerOldName" required  lay-verify="required" placeholder="在app上显示的名字..." autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">图片状态</label>
			<div class="layui-input-block">
				<select name="bannerState">
					<option value="2" checked>显示</option>
					<option value="1">不显示</option>
					<option value="0">待删除</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">图片描述</label>
			<div class="layui-input-block">
                <textarea style="height:200px" name="bannerDescription" required  lay-verify="required"
                          placeholder="请对图片进行简单描述..." autocomplete="off" class="layui-input"></textarea>
			</div>
		</div>
        <div class="layui-form-item">
            <label class="layui-form-label">轮播图</label>
            <div class="layui-input-block">
                <input type="hidden" name="bannerImageUrl">
                <button type="button" class="layui-btn" id="bannerImageUrl">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<%--添加  end--%>
    <%--更新  start--%>
    <form class="layui-form" action="" lay-filter="updateFormFilter" id="updateForm" style="display: none;padding: 20px 50px 0 0 " method="post" enctype="multipart/form-data">
        <div class="layui-form-item">
            <label class="layui-form-label">图片名</label>
            <div class="layui-input-block">
                <input type="hidden" name="bannerId">
                <input type="hidden" name="bannerDate">
                <input type="text" name="bannerOldName" required  lay-verify="required" placeholder="在app上显示的名字..." autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片状态</label>
            <div class="layui-input-block">
                <select name="bannerState">
                    <option value="2" checked>显示</option>
                    <option value="1">不显示</option>
                    <option value="0">待删除</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片描述</label>
            <div class="layui-input-block">
                <textarea style="height:200px" name="bannerDescription" required  lay-verify="required"
                          placeholder="请对图片进行简单描述..." autocomplete="off" class="layui-input"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">轮播图</label>
            <div class="layui-input-block">
                <input type="hidden" name="bannerImageUrl">
                <button type="button" class="layui-btn" id="updateImage">
                    <i class="layui-icon">&#xe67c;</i>更新图片
                </button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="updateDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <%--更新  end--%>

	<script>
		layui.use(['form','table','layer','upload'],function () {
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
			var upload = layui.upload;
			var $ = layui.$;
			/*显示表格所有内容*/
			table.render({
				elem: '#bannerList'
				,height: 500
				,url: '${pageContext.request.contextPath}/banner/selectAllBanners' //数据接口
				,limit:5   //默认每页三条数据,要求limit的值必须包含的limits中
				,limits:[5,10,15]
				,page: true //开启分页
				,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
				,totalRow: true //开启合计行
				,cols: [[ //表头
					{type:'checkbox'}
					,{field: 'bannerId', title: '编号', width:75}
					,{field: 'bannerImageUrl', title: '上传的图片', width:150,align: "center", templet: "#showimg"}
					,{field: 'bannerOldName', title: '图片名', width:150}
					,{field: 'bannerState', title: '状态', width:150,templet:function (d) {
							if (d.bannerState==0) {
								return '待删除'
							}else if (d.bannerState==1) {
								return '不显示'
							}else{
								return '显示'
							}
						}}
					,{field: 'bannerDate', title: '日期', width:150}
					,{field: 'bannerDescription', title: '描述', width:150}
					,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
				]]
			});
            //-----最左头侧！监听头工具栏事件,左边+号  tableFilter是表格上的Filter   start---
            table.on('toolbar(bannerList)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id)
                    ,data = checkStatus.data; //获取选中的数据
                switch(obj.event){
                    case 'add':
                        // ----- 添加数据1 弹出层进行添加start-------
                        layer.open({
                            type:1,
                            title:["添加轮播图","color:black;font-size:20px;"],
                            area:"500px",
                            maxmin: true,
                            content:$("#addForm")
                        })
                        // ----- 添加数据1 弹出层进行添加end-------
                        break;
                    case 'update':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else if(data.length > 1){
                            layer.msg('只能同时编辑一个');
                        } else {
                            layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                        }
                        break;
                    case 'delete':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else {
                            layer.msg('删除');
                        }
                        break;
                };
            });
            /*---上传图片并回显到隐藏域方便添加时直接使用  start---- */
            /*--图片添加回显 start--*/
            upload.render({
                elem:'#bannerImageUrl',
                url:'${pageContext.request.contextPath}/banner/upload',
                done:function (res) {
                    form.val('addFromFilter',{
                        bannerImageUrl:res.bannerImageUrl
                    })
                }
            })
            /*--图片添加回显 end--*/
            /*--图片更新回显 start--*/
            upload.render({
                elem:'#updateImage',
                url:'${pageContext.request.contextPath}/banner/upload',
                done:function (res) {
                    console.log(res.bannerImageUrl)
                    form.val('updateFormFilter',{
                        bannerImageUrl:res.bannerImageUrl
                    })
                }
            })
            /*--图片更新回显 end--*/
            /*---上传图片并回显到隐藏域方便添加时直接使用  end---- */
            // ----- 添加start-------
            form.on('submit(formDemo)',function () {
                $.ajax({
                    url:'${pageContext.request.contextPath}/banner/insertBanner',
                    data:$("#addForm").serialize(),
                    success:function (result) {
                        if (result.flag){
                            layer.closeAll();//关闭弹出框
                            $("#addForm")[0].reset();//清空表单内容
                            //进行重新加载
                            table.reload('bannerList');
                            //响应给用户信息，添加成功
                            layer.msg("添加成功！")
                        }
                        else {
                            layer.msg("添加失败！")
                        }
                    },
                    error:function () {
                        alert("出现异常，联系管理员！")
                    }
                })
                return false;
            });
            // ----- 添加end-------

            /*---编辑、删除 start---*/
            table.on('tool(bannerList)',function (obj) {
                //修改
                if(obj.event=='edit'){
                    layer.open({
                        type:1,
                        title:["修改轮播图","color:balck;font-size:20px"],
                        area:'500px',
                        content:$("#updateForm")
                    })
                    $.ajax({
                        url:'${pageContext.request.contextPath}/banner/selectOneBanner',
                        data:'bannerId='+obj.data.bannerId,
                        success:function (result) {
                            form.val('updateFormFilter',{
                                bannerId:result.bannerId,
                                bannerImageUrl:result.bannerImageUrl,
                                bannerOldName:result.bannerOldName,
                                bannerState:result.bannerState,
                                bannerDate:result.bannerDate,
                                bannerDescription:result.bannerDescription
                            })
                        }
                    })
                    form.on('submit(updateDemo)',function () {
                        $.ajax({
                            url:'${pageContext.request.contextPath}/banner/updateBanner',
                            data:$("#updateForm").serialize(),
                            success:function (result) {
                                if (result.flag){
                                    layer.closeAll();//关闭弹出框
                                    $("#updateForm")[0].reset();//清空表单内容
                                    //进行重新加载
                                    table.reload('bannerList');
                                    //响应给用户信息，添加成功
                                    layer.msg("更新成功！")
                                }
                                else {
                                    layer.msg("更新失败！")
                                }
                            },
                            error:function () {
                                alert("出现异常，联系管理员！")
                            }
                        })
                        return false;
                    })
                }
                //删除
                else if(obj.event=='del'){
                    layer.confirm('确定要删除吗？',function (index) {
                        $.ajax({
                            url:'${pageContext.request.contextPath}/banner/deleteBanner',
                            data:'bannerId='+obj.data.bannerId,
                            success:function (result) {
                                if (result.flag){
                                    table.reload('bannerList');
                                    layer.msg("删除成功！")
                                } else {
                                    layer.msg("删除异常!")
                                }
                            },
                            error:function () {
                                alert("数据异常")
                            }
                        })
                        layer.close(index);
                    })

                }else {

                }
                return false;
            })
            /*---编辑、删除 end---*/
		})

	</script>
</body>

</html>